<template>
  <div id="addWarden">
    <k-header headTitle="新增管理员" goBack="true" />
    <div class="wardenedit" :class="headIos?'side-fixd-ios':'side-fixed'">
      <div class="personalinfor">
        <ul>
          <li>
            <div class="wardenleft">姓名</div>
            <div class="wardenright">
              <input type="text" @change="checkcahnge" v-model="name" />
            </div>
          </li>
          <li>
            <div class="wardenleft">手机号</div>
            <div class="wardenright">
              <input type="text" placeholder="将作为用户登录名" @change="checkcahnge" v-model="telnum" maxlength="11" />
            </div>
          </li>
          <li>
            <div class="wardenleft">职位</div>
            <div class="wardenright">
              <input type="text" @change="checkcahnge" v-model="posts" />
            </div>
          </li>
        </ul>
      </div>
      <p class="wardeng">权限</p>
      <group>
        <x-switch title="余额支付权限" v-model="value" @on-change="linespermis"></x-switch>
      </group>
      <div class="editbalance" v-if="lines">
        <div class='editleft'>
          <input type="text" placeholder="输入可用余额上限(请输入当前账号下可用余额的最高额度)" v-model="linesprice" />
        </div>
        <div class="editright">元</div>
      </div>
    </div>
    <toast v-model="showPositionValue" type="text" width="100%" :time="1800" is-show-mask :text="message" position="bottom"></toast>
    <toast v-model="showPositionValue1" type="text" width="100%" :time="2000" is-show-mask text="该用户已认证企业请联系用户" position="bottom"></toast>
    <div class="wardenbtns" @click="addtn">新增</div>
  </div>
</template>
<style scoped>
  ul,li {
    list-style: none;
  }
  .wardenedit {
    margin-top: 45px;
    padding: 1rem 0 0 0;
    font-size: 1.4rem;
  }
  .side-fixd-ios {
    margin-top: 65px;
  }
 .personalinfor {
   background-color: #fff;
 }
  .personalinfor li {
    overflow: hidden;
    height: 4rem;
    line-height: 4rem;
    padding: 0 1.2rem;
    border-bottom: 1px solid #f5f5f5;
  }
  .personalinfor .wardenleft {
    float: left;
  }
  .personalinfor .wardenright {
    float: right;
    height: 4rem;
  }
  .wardenright input {
    height: 3.5rem;
    border: none;
    text-align: right;
    outline: none;
  }
  .wardeng {
    height: 4rem;
    line-height: 4rem;
    padding: 0 0 0 1.2rem;
  }
  .wardenbtns {
    background-color: #F89721;
    color: #fff;
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 1.6rem;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .editbalance {
    height: 44px;
    line-height: 44px;
    overflow: hidden;
    background-color: #fff;
    padding: 0 1.2rem;
  }
  .editbalance .editleft {
    float: left;
    width: 80%;
  }
  .editbalance .editleft input {
    width: 100%;
    height: 3rem;
    border: none;
    outline: none;
  }
  .editbalance .editright {
    float: right;
  }
</style>
<script>
import kHeader from '../../common/head'
import { Group, XSwitch, Toast } from 'vux'
import util from '../../../libs/util'
export default {
  name: 'warden',
  data() {
    return {
      value: false,
      name: '',
      telnum: '',
      posts: '',
      message: '请填写完整',
      showPositionValue: false,
      showPositionValue1: false,
      Whethernot: false,
      lines: false,
      linesprice: '',
      headIos: false,
      isClick:true
    }
  },
  components: {
    kHeader,
    Group,
    XSwitch,
    Toast
  },
  created() {
    if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
      this.headIos = true;
    }
  },
  methods: {
    checkcahnge() {
      if(this.name && this.telnum && this.posts){
        this.Whethernot = false;
      }else {
        this.Whethernot = true;
      }
    },
    addtn() {
      if(this.isClick){
        this.isClick = false;
        var that = this;
        var url = 'lblsapp-h5/v2/personCenter/adminAdd.json';
        var jso = {};
        jso.name = that.name;
        jso.mobile = that.telnum;
        jso.position = that.posts;
        if(that.value){ //如果支付权限给了
          if (this.name && this.telnum && this.posts && this.linesprice) {
            jso.status = 0;
            jso.amount = that.linesprice;
            util.ajax.post(url, jso).then(function(stats){
              if (stats.data.code == 0) {
                that.isClick = true;
                that.$router.push('/setPermissions');
              } else if(stats.data.code == '1'){
                that.isClick = true;
                that.showPositionValue1 = true;
              };
            }).catch(function(error){
              console.log(error);
            })
          }else {
            that.showPositionValue = true;
          }
        }else { //没给支付权限直接提交
          if(this.Whethernot == false){
            jso.status = 1;
            jso.amount = '';
            util.ajax.post(url, jso).then(function(stats) {
              if(stats.data.code == 0){
                that.$router.push('/setPermissions');
              };
            }).catch(function(error) {
              console.log(error);
            })
          }else {
            that.showPositionValue = true;
          }
        }
      }else {
        this.$vux.alert.show({
          title: '温馨提示',
          content: '请不要重复提交',
          onShow () {
//                    console.log('Plugin: I\'m showing')
          },
          onHide () {
//                    console.log('Plugin: I\'m hiding')
          }
        })
      }

    },
    linespermis(value) {
      if(value){
        this.lines = true;
      }else {
        this.lines = false;
      }
    }
  }
}
</script>

